<script setup lang="ts">
import { useAppFooterRouteNames as routeWhiteList } from '~/config'

const route = useRoute()
const router = useRouter()

function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}

const { t } = useI18n()

const title = computed(() => {
  if (!route.meta)
    return ''
  return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
})

const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
</script>

<template>
  <VanNavBar :title="title" :left-arrow="!showLeftArrow" placeholder clickable fixed @click-left="onBack">
    <template #left>
      <div class="w-28 h-28 bg-#394243 rounded-5 flex items-center justify-center ">
        <van-icon name="arrow-left" size="18" />
      </div>
    </template>
  </VanNavBar>

</template>
<style lang="css" scoped>
::v-deep .van-nav-bar__content {
  background: #222628;
  height: 54px;
  color: #2b2624;
  padding-top: 40px;
  padding-bottom: 20px;
}

::v-deep .van-nav-bar__content::after {
  border: 0px solid #222628;
}
::v-deep .van-nav-bar__left{
  margin-top: 20px;
}

::v-deep .van-nav-bar__title {
  margin-left: 60px;
  color: #fffefe;
}
::v-deep .van-hairline--bottom:after {
  border-bottom-width:0;
}

::v-deep .van-nav-bar .van-icon {
  /* margin-top: 30px; */
  color: #fffefe;
}
</style>
